<template>
  <div>
    <div class="box">
      <div class="row header">
        <span class="cell">序号</span>
        <span class="cell">书名</span>
        <span class="cell">日期</span>
        <span class="cell">价格</span>
        <span class="cell">数量</span>
        <span class="cell">操作</span>
      </div>
      <div class="row" v-for="(item, index) in list" :key="index">
        <span class="cell">{{ index + 1 }}</span>
        <span class="cell">{{ item.title }}</span>
        <span class="cell">{{ item.date }}</span>
        <span class="cell">￥ {{ item.price }}</span>
        <span class="cell">
          <button  @click="reduceAction(index)">-</button>
          {{ item.count }}
          <button :disabled="item.count > 5" @click="increaseAction(index)">+</button>
        </span>
        <span class="cell">
          <button @click="deleteAction(index)">删除</button>
          <button>增加</button>
        </span>
      </div>
    </div>
    <h2>总价格：￥{{ totalPrice }}</h2>
  </div>
</template>

<script setup>
import { computed, ref } from 'vue';

const list = ref([
  { title : 'JavaScript高级程序设计', date: '2020-01-01', price: 30, count: 1 },
  { title : 'Vue.js权威指南', date: '2020-01-01', price: 21, count: 1 },
  { title : 'CSS揭秘', date: '2020-01-01', price: 10, count: 1 }
])

const totalPrice = computed(() => {
  let sum = 0
  list.value.forEach((item) => {
    // sum = item.price * item.count + sum
    sum += item.price * item.count
  });
  return sum
})

const reduceAction = (index) => {
  console.log('----');
  const count = list.value[index].count
  // if (count < 1) return
  if (count > 0 ) {
    list.value[index].count--
  } 
  
}

const increaseAction = (index) => {
  console.log('++++');
  list.value[index].count++
}

const deleteAction = (index) => {
  console.log('删除');
  list.value.splice(index, 1)
}

</script>

<style scoped>
.box {
  background-color: skyblue;
  padding: 10px;
}
.row {
  background-color: pink;
  display: flex;
  justify-content: space-between;
}
.cell {
  /* background-color: yellowgreen; */
  padding: 4px 0;
  flex: 1;
  text-align: center;
}
.header {
  background-color: #f5f6f6;
}
</style>